<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <!-- <div class="filter-container"> -->
        <el-row style="width:100%;">

            <el-input v-model="listQuery.username"
        clearable class="filter-item" style="width: 200px;marginRight:12px" placeholder="输入预算编码或预算科目名" />

            <span style="fontSize:16px;fontWeight:bold;">是否停用</span>
            <el-row style="display: inline-block;margin-left: 12px;">
                <el-checkbox label="是"></el-checkbox>
                <el-checkbox label="否"></el-checkbox>
            </el-row>
        </el-row>

        <!-- 导入操作 -->
        <el-row type="flex" justify="end" style="width:100%;">
            <el-button class="filter-item" type="text" @click="">新增</el-button>
            <el-button class="filter-item" type="text" @click="">导入</el-button>
            <el-button class="filter-item" type="text" @click="">导入模板</el-button>
        </el-row>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row style="marginTop:12px;">

    <el-table-column align="center" label="序号" prop="id" fixed="left"/>
    <el-table-column width="110" align="center" label="核算科目编码" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="核算科目名" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="科目类型" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="损益" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="借贷" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="业务类型" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="税率(一般)" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="税率(小规模)" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="预算科目名" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="预算科目编码" prop="budget_project_name" />
    <el-table-column width="110" align="center" label="其他" prop="budget_project_name" />
    <el-table-column width="500" align="center" label="操作" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showSetDateAlert=true">设置有效期</el-button>
            <el-button type="text" size="mini" @click="showBindAlert=true">绑定附预算科目</el-button>
            <el-button type="text" size="mini" @click="showEditAlert=true">编辑</el-button>
            <el-button type="text" size="mini" @click="showStopAlert=true">停用</el-button>
            <el-button type="text" size="mini" @click="showDelAlert=true">删除</el-button>
        </template>
    </el-table-column>

        </el-table>




        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        <!-- 用户编辑对话框 -->
        <el-dialog :visible.sync="showEditAlert" title="编辑用户信息" width="40%">
            <el-form ref="userDetail" :model="userDetail"
        status-icon label-position="left" label-width="100px" style="width: 400px; margin-left: 50px">
                <el-form-item label="姓名/登录名" prop="username">
                    <el-input v-model="userDetail.username" :disabled="true" />
                </el-form-item>
                <el-form-item label="联系电话" prop="nickname">
                    <el-input v-model="userDetail.nickname" />
                </el-form-item>
                <el-form-item label="密码" prop="mobile">
                    <el-input v-model="userDetail.password" />
                </el-form-item>
                <el-form-item label="设置项目" prop="mobile">
                    <el-select v-model="userDetail.gender" placeholder="请选择" style="width:100%">
                        <el-option v-for="(item, index) in genderDic" :key="index" :label="item" :value="index" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleUserUpdate">确定</el-button>
                <el-button type="default" @click="showEditAlert = false">取消</el-button>
            </div>
        </el-dialog>

        <!-- 设置日期对话框 -->
        <el-dialog title="设置有效期" :visible.sync="showSetDateAlert" width="40%" :before-close="handleClose">
            <el-form ref="userDetail" :model="userDetail"
        status-icon label-position="left" label-width="100px" style="width: 400px; margin-left: 50px">
                <el-form-item label="有效期" prop="username">
                    <el-input v-model="userDetail.username"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showSetDateAlert = false">保存</el-button>
                <el-button type="default" @click="showSetDateAlert = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 绑定科目对话框 -->
        <el-dialog title="绑定预算科目" :visible.sync="showBindAlert" width="40%" :before-close="handleClose">
            <el-form ref="userDetail" :model="userDetail"
        status-icon label-position="left" label-width="100px" style="width: 400px; margin-left: 50px">
                <el-form-item label="预算科目名" prop="username">
                    <el-input v-model="userDetail.username"/>
                </el-form-item>
                <el-form-item label="预算科目编码" prop="nickname">
                    <el-input v-model="userDetail.nickname" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showBindAlert = false">保存</el-button>
                <el-button type="default" @click="showBindAlert = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 停用对话框 -->
        <el-dialog title="主营业务收入 准备停用" :visible.sync="showStopAlert" width="40%" :before-close="handleClose">
            <span>是否停用</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="showStopAlert = false">是</el-button>
                <el-button type="default" @click="showStopAlert = false">否</el-button>
            </span>
        </el-dialog>
        <!-- 删除对话框 -->
        <el-dialog title="主营业务收入 准备删除" :visible.sync="showDelAlert" width="40%" :before-close="handleClose">
            <span>是否删除</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="showDelAlert = false">是</el-button>
                <el-button type="default" @click="showDelAlert = false">否</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchList, userDetail, updateUser } from "@/api/user";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "User",
  components: { Pagination },
  data() {
    return {
      list: [
      {id:0,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:1,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:2,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:3,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:4,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:5,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:6,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:4,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:5,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:6,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:4,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:5,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      {id:6,budget_project_id:"假数据01",budget_project_name:"假数据名称01",budget_project_type_name:"类型一",profit_loss:"+20",borrowing:20,rate_normal:"10%",rate_mini:"3%",house_area:300,other:"",},
      ],
        showDelAlert:false,
        showStopAlert:false,
        showBindAlert:false,
        showSetDateAlert:false,
        showEditAlert:false,

      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        username: undefined,
        mobile: undefined,
        userId: undefined,
        sort: "add_time",
        order: "desc",
      },
      downloadLoading: false,
      genderDic: ["未知", "男", "女"],
      levelDic: ["普通用户", "VIP用户", "高级VIP用户"],
      statusDic: ["可用", "禁用", "注销"],
      userDialogVisible: false,
      userDetail: {},
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      if (this.listQuery.userId) {
        userDetail(this.listQuery.userId)
          .then((response) => {
            this.list = [];
            if (response.data.data) {
              this.list.push(response.data.data);
              this.total = 1;
              this.listLoading = false;
            } else {
              this.list = [];
              this.total = 0;
              this.listLoading = false;
            }
          })
          .catch(() => {
            this.list = [];
            this.total = 0;
            this.listLoading = false;
          });
      } else {
        fetchList(this.listQuery)
          .then((response) => {
            this.list = response.data.data.list;
            this.total = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list = [];
            this.total = 0;
            this.listLoading = false;
          });
      }
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["用户名", "手机号码", "性别", "生日", "状态"];
        const filterVal = ["username", "mobile", "gender", "birthday", "status"];
        excel.export_json_to_excel2(tHeader, this.list, filterVal, "用户信息");
        this.downloadLoading = false;
      });
    },
    handleDetail(row) {
      this.userDetail = row;
      this.userDialogVisible = true;
    },
    handleUserUpdate() {
      updateUser(this.userDetail)
        .then((response) => {
          this.userDialogVisible = false;
          this.$notify.success({
            title: "成功",
            message: "更新用户成功",
          });
        })
        .catch((response) => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg,
          });
        });
    },
  },
};
</script>
